<template>
  <div class="mainbody">
    <el-form ref="form"
             :model="listQuery"
             inline>
      <el-row>
        <el-col :span="8">
          <el-form-item label="月子中心名称:">
            <el-input v-model="listQuery.postpartum_name"
                      placeholder="请输入"
                      size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary"
                     size="small"
                     style="width:100px;">搜索</el-button>
          <el-button size="small"
                     style="width:100px;">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="buttonBox"
         style="margin-bottom:20px;;
">
      <el-button type="primary"
                 size="mini"
                 style="width:100px;margin-right:20px">批量操作</el-button>
      <el-button type="primary"
                 size="mini"
                 style="width:100px;margin-right:20px">导入集采金额</el-button>
      <el-button type="primary"
                 size="mini"
                 style="width:100px;margin-right:20px">下载导入模板</el-button>
    </div>

    <div class="tableBox"
         style="box-shadow: 5px 5px 15px #ccc">
      <el-table :data="list"
                v-loading="listLoading"
                element-loading-text="拼命加载中"
                :height="tableHeight"
                :cell-style="{padding:'5px'}"
                stripe
                border
                style="width: 100%">
        <el-table-column type="selection"
                         align="center"
                         width="55">
        </el-table-column>
        <el-table-column prop="postpartum_name"
                         align="center"
                         label="月子中心名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="course_enable"
                         align="center"
                         label="陪训课程状态"
                         width="180">
          <template slot-scope="scope">
            <el-switch v-model="list.course_enable"
                       @change="getEnable(scope.row)"
                       active-color="#13ce66"
                       inactive-color="#ccc">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address"
                         align="center"
                         label="陪训课程列表">
          <template slot-scope="scope">
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="address"
                         align="center"
                         label="集采金额">
          <template slot-scope="scope">{{ scope.row.gather_info.time}}{{ scope.row.gather_info.amount}}
            <el-button type="text">查看更多</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination :page-sizes="[20,50,100,200]"
                     :total="total"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>

  </div>
</template>

<script>
import { getPostpartumList, getoPstpartumEnable } from "@/api/system/training"
export default {
  created () {
    this.getList()
  },
  computed: {
    tableHeight () {
      const fullHeight = document.documentElement.clientHeight
      return fullHeight - 300
    }
  },
  data () {
    return {
      total: 1,
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        page_size: 20,
        postpartum_id: "",
        postpartum_name: "",
        provinces: "",
        city: "",
        company_name: ""
      }
    }
  },
  methods: {
    getList () {
      getPostpartumList(this.listQuery).then((res) => {
        if (res.data.code == "200") {
          this.list = res.data.data.list
          console.log(this.list);
          this.total = res.data.data.count
          this.listLoading = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // getEnable (id) {
    //   console.log(id);
    //   // getoPstpartumEnable(this.listQuery).then((res) => {
    //   //   console.log(res);
    //   // })
    // },
    handleSizeChange (val) {
      this.listQuery.page_size = val
      this.listQuery.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>

<style>
</style>